<template>
  <LayOut :bread="[{
    title: '首页',
  }]">
    <template #functionalDomain>
      <el-popover placement="top-start" :width="300" trigger="hover"
        content="this is content, this is content, this is content" popper-style="padding: 0;">
        <template #reference>
          <div class="IdentityInfo">
            <span class="nickName">{{ adminInfo?.username }}</span>
            <el-avatar> {{ adminInfo?.username?.charAt(0) }} </el-avatar>
          </div>
        </template>
        <div class="menusDropdown">
          <div class="header">
            <p class="nickName">{{ adminInfo?.username }}</p>

            <p class="signature">没有签名是一种态度</p>
          </div>
          <!-- <div class="content">
            <ul>
              <li>编辑信息</li>
            </ul>
          </div> -->
          <div class="footer" @click="logOutFunc">
            退出
          </div>
        </div>
      </el-popover>
    </template>
    <div class="home">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>个人信息</span>
              </div>
            </template>
            <ul>
              <li>
                <span>昵称：</span>
                <span>TE</span>
              </li>
              <li>
                <span>邮箱：</span>
                <span>3258379404</span>
              </li>
              <li></li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="8">
          <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="8">
          <div class="grid-content ep-bg-purple" />
        </el-col>
      </el-row>
    </div>
  </LayOut>
</template>

<script lang="ts" setup>
import LayOut from '../components/LayOut.vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();
import { useAuthorizationStore } from '@/stores/authorization';
import { useCourseClassifyStore } from '@/stores/courseClassify';
import service from '@/service/index';
import { ElLoading, ElMessage } from 'element-plus';
import { to } from '../plugin/index';
import type { IAdminDataModal } from '../type';
const { getUserInfo, queryCourseClassify } = service;
// 创建 store 实例
const authorizationStore = useAuthorizationStore();
const courseClassifyStore = useCourseClassifyStore();
const { courseClassifys, setCourseClassifys } = courseClassifyStore;

const adminInfo = ref<IAdminDataModal>();

const getUserByidFunc = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  const [res, err] = await to(getUserInfo());
  loading.close();
  const result = res.data;
  if (!err && result.code === 1) {
    console.log(result);
    adminInfo.value = result.data;
  }
}

const queryCourseClassifyFunc = async () => {
  const [res, err] = await to(queryCourseClassify());
  const result = res.data;
  if (!err && result.code === 1) {
    setCourseClassifys(result.data);
  } else {
    console.error(err);
  }
}

const logOutFunc = () => {
  authorizationStore.clearAuthorization();
  router.replace('/login');
}

onMounted(() => {
  getUserByidFunc();
  queryCourseClassifyFunc();
})
</script>

<style lang="less" scoped>
.IdentityInfo {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #000;
  cursor: pointer;

  .nickName {
    padding: 0 10px;
    /* font-weight: bold; */
  }
}

.menusDropdown {
  .header {
    padding: 20px;
    border-bottom: 1px solid var(--el-border-color);
    cursor: pointer;

    .nickName {
      font-size: 18px;
      font-weight: bold;

      .email {
        font-size: 15px;
      }
    }

    .signature {
      font-size: 15px;
    }
  }

  .content {
    border-bottom: 1px solid var(--el-border-color);

    ul {
      list-style: none;
      padding: 0;

      li {
        padding: 10px 20px;
        cursor: pointer;

        &:hover {
          background-color: #ecf5ff;
        }
      }
    }
  }

  .footer {
    font-size: 15px;
    padding: 15px;
    text-align: center;
    cursor: pointer;

    &:hover {
      background-color: #ecf5ff;
    }
  }
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
